import 'package:flutter/material.dart';
import '../../models/chat.dart';
import '../chat/chat_detail_page.dart';
import '../../utils/avatar_utils.dart';

class ProfilePage extends StatelessWidget {
  final String name;
  final String? avatarUrl;
  final String? wechatId;

  const ProfilePage({
    super.key,
    required this.name,
    this.avatarUrl,
    this.wechatId,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.black),
          onPressed: () => Navigator.pop(context),
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.more_horiz, color: Colors.black),
            onPressed: () {},
          ),
        ],
      ),
      body: Column(
        children: [
          // Header
          Padding(
            padding: const EdgeInsets.all(20),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  width: 64,
                  height: 64,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(6),
                    image: avatarUrl != null
                        ? DecorationImage(
                            image: avatarUrl!.startsWith('assets/')
                                ? AssetImage(avatarUrl!) as ImageProvider
                                : NetworkImage(avatarUrl!),
                            fit: BoxFit.cover,
                          )
                        : null,
                    color: Colors.grey[300],
                  ),
                  child: avatarUrl == null
                      ? buildInitialsAvatar(name, size: 64)
                      : null,
                ),
                const SizedBox(width: 20),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        name,
                        style: const TextStyle(
                          fontSize: 22,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const SizedBox(height: 4),
                      Text(
                        'WeChat ID: ${wechatId ?? "wxid_123456"}',
                        style: const TextStyle(color: Colors.grey, fontSize: 14),
                      ),
                      const SizedBox(height: 4),
                      const Text(
                        'Region: China',
                        style: TextStyle(color: Colors.grey, fontSize: 14),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          const Divider(height: 1),
          
          // Body Items
          _buildListItem('Set Remarks and Tags'),
          const Divider(height: 1, indent: 16),
          _buildListItem('Friend Permissions'),
          const SizedBox(height: 8),
          
          _buildListItem('Moments', trailing: _buildMomentsPreview()),
          const Divider(height: 1, indent: 16),
          _buildListItem('More Info'),
          const SizedBox(height: 8),
          
          _buildListItem('Messages and Call'),
          
          const Spacer(),
          
          // Footer Buttons
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
            child: Column(
              children: [
                SizedBox(
                  width: double.infinity,
                  child: ElevatedButton.icon(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => ChatDetailPage(
                            chat: Chat(
                              name: name,
                              message: '', // Placeholder
                              time: '', // Placeholder
                              avatarUrl: avatarUrl,
                            ),
                          ),
                        ),
                      );
                    },
                    icon: const Icon(Icons.chat_bubble_outline, color: Color(0xFF576B95)),
                    label: const Text(
                      'Send Message',
                      style: TextStyle(color: Color(0xFF576B95), fontWeight: FontWeight.bold),
                    ),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: const Color(0xFFF7F7F7),
                      elevation: 0,
                      padding: const EdgeInsets.symmetric(vertical: 12),
                    ),
                  ),
                ),
                const SizedBox(height: 12),
                SizedBox(
                  width: double.infinity,
                  child: ElevatedButton.icon(
                    onPressed: () {},
                    icon: const Icon(Icons.videocam_outlined, color: Color(0xFF576B95)),
                    label: const Text(
                      'Audio/Video Call',
                      style: TextStyle(color: Color(0xFF576B95), fontWeight: FontWeight.bold),
                    ),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: const Color(0xFFF7F7F7),
                      elevation: 0,
                      padding: const EdgeInsets.symmetric(vertical: 12),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildListItem(String title, {Widget? trailing}) {
    return Container(
      color: Colors.white,
      child: ListTile(
        title: Text(title),
        trailing: SizedBox(
          width: trailing != null ? 160 : 24,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              if (trailing != null) Expanded(child: trailing),
              const Icon(Icons.arrow_forward_ios, size: 16, color: Colors.grey),
            ],
          ),
        ),
        onTap: () {},
      ),
    );
  }

  Widget _buildMomentsPreview() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        _buildPreviewImage('assets/images/1.jpg'),
        const SizedBox(width: 4),
        _buildPreviewImage('assets/images/2.jpg'),
        const SizedBox(width: 4),
        _buildPreviewImage('assets/images/3.jpg'),
      ],
    );
  }

  Widget _buildPreviewImage(String path) {
    return Container(
      width: 40,
      height: 40,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(path),
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}
